import React, { useState } from "react";
import logo from "../../assets/s2.png";
import icon3 from "../../assets/lmicon/login_icon_weixin_white_n.png";
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons";
import "./login.css";
import { Form, Input, Button, Toast } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { logining } from "store/login"; //
import Homepwb from "../components/homepwd";
import Homeuser from "../components/homeuser";

const Index = () => {
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);
  const navigate = useNavigate();
  const dispatch = useDispatch<any>();

  // const userInfo = useSelector(userSelector);

  // console.log(userInfo);

  const passwordOne = () => {
    navigate("/PasswordOne");
  };
  const register = () => {
    navigate("/Register");
  };

  const handleSendCode = async () => {
    const data = form.getFieldsValue();
    // console.log(data);
    dispatch(logining(data)).then((res: any) => {
      if (res) {
        if (res.payload.status === "0000") {
          localStorage.setItem("userId", res.payload.result.userId);
          localStorage.setItem("sessionId", res.payload.result.sessionId);
          navigate("/");
        }
      }
    });
  };

  return (
    <div className="login-box">
      <div className="login-top">
        <img src={logo} className="logo" />
      </div>
      <div className="login-main">
        <div className="main">
          <Form layout="horizontal" mode="card" form={form}>
            <Form.Item name={"email"}>
              <Homepwb placeholder="请输入邮箱账号" />
            </Form.Item>
            <Form.Item
              name={"pwd"}
              extra={
                <div>
                  {!visible ? (
                    <EyeInvisibleOutline onClick={() => setVisible(true)} />
                  ) : (
                    <EyeOutline onClick={() => setVisible(false)} />
                  )}
                </div>
              }
            >
              <Homeuser
                placeholder="请输入密码"
                type={visible ? "text" : "password"}
              />
            </Form.Item>
          </Form>
          <div className="btn">
            <Button
              block
              color="primary"
              size="middle"
              onClick={handleSendCode}
            >
              登录
            </Button>
          </div>
        </div>
      </div>
      <div className="foot">
        <div onClick={passwordOne}>忘记密码</div>
        <div className="foot-item">
          <div>暂无账号?</div>
          <b onClick={register}>立即注册</b>
        </div>
      </div>
      <div className="login">
        <div>————————其他登录方式————————</div>
        <img src={icon3} alt="" />
      </div>
    </div>
  );
};
export default Index;
